<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <div>
                <span>用户名：</span>
                <span>
                    <input type="text" v-model="uname" />
                </span>
                <span>{{tip}}</span>
            </div>
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    uname: '',
                    tip: ''
                },
                methods: {
                    checkName: function(uname) {
                        // 调用接口，但是可以通过使用定时任务的方式模拟接口调用
                        // var that = this
                        setTimeout(() => {
                            // 模拟接口调用
                            if (uname == 'admin') {
                                this.tip = '用户名不可用';
                            } else {
                                this.tip = '用户名可用';
                            }
                        }, 2000);
                    }
                },
                watch: {
                    uname: function(val) {
                        // setTimeout(() => {
                        //     if (val == 'admin') {
                        //         this.tip = '用户名不可用';
                        //     } else {
                        //         this.tip = '用户名可用';
                        //     }
                        // }, 1000);
                        // 调用后台接口验证用户名的合法性
                        this.checkName(val);
                        this.tip = '正在验证...';
                    }
                }
            });
        </script>
    </body>
</html>
